<template>
  <blackboard :color="color" />
  <!-- 顶部栏 -->
  <div class="topBar" :style="{width:barWidth}">
    <div>
      <img src="../assets/在线人数标识.png" />
      <span style="margin-left: 1rem">{{ duration }}</span>
    </div>
    <span class="centerSpan">会议号：{{ roomId }}</span>
  </div>
  <!-- 底部栏 -->
  <div class="bottonBar" :style="{width:barWidth}">
    <div class="leftBottom">
      <div class="image">
        <img src="../assets/麦克风.png" @click="closeAudio()"/>
        <img src="../assets/摄像头.png" />
        <!-- <img src="../assets/音量.png" /> -->
      </div>
      <div class="text">
        <span>麦克风</span>
        <span>摄像头</span>
        <!-- <span>音量</span> -->
      </div>
    </div>
    <div class="centerBottom">
      <div class="image">
        <img src="../assets/签到.png" @click="signIn()" />
        <!-- <img src="../assets/屏幕共享.png" /> -->
        <img src="../assets/聊天.png" @click="showChat()"/>
        <!-- <img src="../assets/录制.png" @click="startRecord()" /> -->
        <!-- <img src="../assets/邀请成员.png" /> -->
        <!-- <img src="../assets/成员管理.png" @click="showMember()"/> -->
        <img src="../assets/设置.png" @click="showSetting()" />
      </div>
      <div class="text">
        <span>签到</span>
        <!-- <span>屏幕<br />共享</span> -->
        <span>聊天</span>
        <!-- <span>录制</span> -->
        <!-- <span>邀请<br />成员</span> -->
        <!-- <span>成员<br />管理</span> -->
        <span>设置</span>
      </div>
    </div>
    <div class="rightBottom" @click="back">
      <img src="../assets/退出.png" />
    </div>
  </div>
  <!-- 浮动框 -->
  <setting :invisible="settingInvisible" />
  <!-- <chat :invisible="chatInvisible"/> -->
  <member :invisible="memberInvisible"/>
  <online-video ref="videoComponent"/>
  <div class="pop" :style="{ display: state }">
    <pre>{{ text }}</pre>
    <button @click="signOrRecord(buttonType)" style="padding: 5px;">{{ buttonText }}</button>
  </div>
  <div class="startMeeting" :style="{display : buttonState}">
    <button @click="startMeeting()">开始授课</button>
    <p>请在所有成员入班之后再开始授课</p>
  </div>
</template>

<script setup>
// import router from "@/router";
// import { onMounted, ref } from "vue";
// import setting from "../components/setting.vue";
// import store from "@/store";

// const roomData = store.state.roomData
// //页面右上角时间显示
// var startTime; //进入页面的时间
// var recentTime; //现在的时间
// var duration = ref("0min"); //页面右上角显示的时间
// //显示其他浮动面板
// var settingInvisible = ref(true); //设置面板是否不显示
// var chatInvisible = ref(true); //聊天面板是否不显示
// var memberInvisible = ref(true); //成员管理面板是否不显示
// var videoInvisible = ref(true)  //视频是否不显示
// var buttonState = ref('block') //开始会议按钮是否显示
// const videoComponent = ref(null) //视频方法
// //设置样式
// const barWidth = ref((window.innerWidth - 20) + 'px'); //顶部和底部栏的宽度
// var color = ref("white"); //设置黑板背景颜色
// //签到和录制按钮显示
// var state = ref("none"); //弹出框是否显示
// var text = ref(); //弹出框中的内容
// var buttonText = ref(); //弹出框中的按钮的内容
// var buttonType = ref(); //弹出框按钮的功能

// const roomId = store.state.roomData.roomId


// //回主页
// function back() {
//   if(confirm("确定要退出吗？")){
//     //清除房间信息
//     store.commit('setRoomData',{
//       userId:-1,
//       roomName:'default',
//       roomId:-1
//     })
//     //跳转回主页
//     router.push("/");
//   }
// }

// onMounted(() => {
//   console.log('房间信息',roomData)
//   // if(roomData.roomId < 0){
//   //   alert('房间号错误！')
//   //   router.push('/');
//   // }
//   startTime = new Date();
//   getTime();
//   buttonState.value = 'block'
//   // if(store.state.roomData.userId != store.state.userData.userId){
//   //   buttonState.value = 'none'
//   // }
//   // startMeeting();
//   //如果是房客的话就不用黑板
//   // if(store.state.roomData.userId != store.state.userData.userId){
//   //   style.value = 'none'
//   // }
// });

// //开始会议，调用onlineVideo组件
// function startMeeting(){
//   //去掉开始会议按钮
//   buttonState.value = 'none'
//   //调用onlineVideo组件
//   if(videoComponent.value){
//     videoComponent.value.video();
//   }
// }

// //获取进入会议的时间
// //这段代码有bug，零点过后显示的时间会变成负数，虽然没什么影响就是了
// function getTime() {
//   setInterval(() => {
//     recentTime = new Date();
//     var recentHour = recentTime.getHours() - startTime.getHours();
//     var recentMinutes = recentTime.getMinutes() - startTime.getMinutes();
//     duration.value =
//       recentHour == 0
//         ? recentMinutes + "min"
//         : recentHour + "h" + recentMinutes + "min";
//   }, 1000 * 60);
// }

// //打开设置页面
// function showSetting() {
//   settingInvisible.value = settingInvisible.value ? false : true;
// }

// //打开聊天页面
// function showChat(){
//   chatInvisible.value = chatInvisible.value ? false : true;
// }

// //打开成员管理页面
// function showMember(){
//   memberInvisible.value = memberInvisible.value ? false : true;
// }

// //签到
// function signIn() {
//   popOut(); //弹出浮动框
//   text.value = "是否发起签到?\n签到时间：3分钟";
//   buttonText.value = "确认发起";
//   buttonType.value = 1;
// }

// //开始录制
// function startRecord() {
//   popOut(); //弹出浮动框
//   text.value = "录屏操作将告知会议中所有人员，请确认。";
//   buttonText.value = "确认录制";
//   buttonType.value = 2;
// }

// //签到和录制
// function signOrRecord(type) {
//   switch (type) {
//     case 1:
//       console.log("开始签到");
//       popOut();
//       setTimeout(() => {
//         alert("签到已结束！");
//       }, 3 * 60 * 1000);
//       break;
//     case 2:
//       console.log("开始录制");
//       popOut();
//       break;
//   }
// }

// //控制弹出框是否显示
// function popOut() {
//   state.value = state.value == "none" ? "flex" : "none";
// }
</script>

<style scoped>
*{
  margin: 0px;
  padding: 0px;
}

.topBar {
  background-color: #ffffff;
  height: 5rem;
  position: absolute;
  top: 0px;
  left: 0px;
  border-bottom: rgb(224, 224, 224) solid 1px;
}

.topBar div {
  position: absolute;
  top: 1.5rem;
  left: 2.75rem;
  display: flex;
  align-items: center;
  color: #33df81;
}

.bottonBar {
  background-color: #ffffff;
  height: 6.75rem;
  position: absolute;
  bottom: 0px;
  left: 0px;
  border-top: rgb(224, 224, 224) solid 1px;
}

.leftBottom {
  position: absolute;
  bottom: 0.625rem;
  left: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  width: auto;
}

.image {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.image img {
  width: 3rem;
  height: auto;
  margin: 1rem;
  margin-bottom: 0.5rem;
}

.text {
  cursor: pointer;
  display: flex;
  flex-direction: row;
}

.text span {
  display: block;
  width: 3rem;
  height: auto;
  margin: 0px 1rem 0px 1rem;
  text-align: center;
}

.centerBottom {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: -2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  width: auto;
  height: auto;
}

.rightBottom {
  cursor: pointer;
  position: absolute;
  bottom: 2.25rem;
  right: 5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  width: auto;
}

.pop {
  height: 12rem;
  width: 25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 4px 20px gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pop pre {
  font-size: 1.25rem;
  margin: 0;
}

.pop button {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  font-size: 1rem;
}

.startMeeting{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: large;
  z-index: 100;
}

.startMeeting button{
  padding: 10px;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 10px;
}

.centerSpan{
  color: black;
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
}
</style>